<template>
  <div v-if="data" class="cover">
    <div class="top">
      <div class="img_cover">
        <img :src="`${$store.state.baseurl}${data.book_coverurl}`" alt="" />
      </div>
      <div class="right">
        <h2>{{ data.book_title }}</h2>
        <div class="item1">
          <p>作者：{{ data.book_author }}</p>
          <p>分类：{{ data.book_type }}</p>
          <p>状态:连载中</p>
          <p>{{ data.book_number }}</p>
        </div>
        <div class="item1">
          <p>更新时间：2021-01-10 22:10:31</p>
          <p>最新章节：《明天下》写完了，请期待《我不是野人》</p>
        </div>
        <div class="item1 item2">
          <p :class="[isShow?'active':'']">
            简介：
            {{ data.book_describe }}。 <span v-if="!isShow" @click="isShow=!isShow">  >> 收回</span>
           
          </p>
           <span v-if="isShow" @click="isShow=!isShow"> 展开>> </span>
        </div>
        <div class="item1">
          <p>
            作者：孑与2所写的《明天下》无弹窗免费全文阅读为转载作品,章节由网友发布。
          </p>
          <p>推荐地址：http://www.sizhicn.com/txt/8194/index.html</p>
        </div>
      </div>
    </div>

    <p class="footer">
      推荐阅读： 元尊 、 逆剑狂神 、 修真四万年 、 沧元图 、 都市超级医仙 、
      修真聊天群 、 首充六元的剑 、 大主宰 、 踏星 、 一品道门
    </p>
  </div>
</template>

<script>
import { ref } from 'vue';
export default {
  props: ["data"],
  setup() {
    const isShow=ref(true)

    return {
      isShow
    }
  }
};
</script>

<style lang="scss" scoped>
div.cover {
  padding: 10px;
  .top {
    display: flex;
    div.img_cover {
      width: 134px;
      height: 168px;
      border: 3px solid #ccc;
      img {
        
        min-width: 100%;
        height: 100%;
      }
    }

    div.right {
      flex: 1;
      padding-left: 15px;
      h2 {
        line-height: 35px;
        height: 35px;
        font-size: 16px;
        color: #666;
      }

      div.item1 {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        min-height: 35px;
        p {
          font-size: 14px;
          color: #666;
          line-height: 24px;
        }
      }
    }
  }

  .footer {
    font-size: 14px;
    color: #333;
    text-align: center;
  }

  .active {
    max-width: 500px;
    width: 100%;
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  span{
    margin-left: 20px;
    font-size: 14px;
    color: #666;
    &:hover{
      color: #369;
      cursor: pointer;
    }
  }
  .item2{
    display: block;
    justify-content: flex-start !important;
  }
}
</style>